<!--
  上拉加载，下拉刷新组件
-->

<template>
  <div class="upDownRefresh">
    <scroll-view
      class="prv-container"
      refresher-default-style="none"
      scroll-with-animation="true"
      :refresher-threshold="refresherThreshold"
      :scroll-y="scrollY"
      :refresher-enabled="refresherEnable"
      :refresher-triggered="triggered"
      :scroll-top="topNum"
      @refresherrefresh="_onRefresh"
      @scrolltolower="_onLoadmore"
      @refresherpulling="_onPulling"
      @refresherrestore="triggered = false"
      @refresherabort="triggered = false"
      @scroll="_onScroll"
    >
      <view v-if="triggered" class="prv-pulldown">
        <text class="pullText"> {{ pullText }}</text>
      </view>

      <!-- 列表内容 -->
      <slot></slot>

      <view class="prv-loadmore">
        <text> {{ loadText }}</text>
      </view>
    </scroll-view>

    <!-- 回到顶部 -->
    <!-- <div v-if="showGotopIcon" class="goTop" @tap="goTop" v-show="showGoTop"></div> -->
  </div>
</template>

<script>
export default {
  props: {
    //默认竖向滚动（非必传,可不传）
    scrollY: {
      type: Boolean,
      default: true
    },
    //默认关闭自定义下拉刷新（非必传,可不传）
    refresherEnable: {
      type: Boolean,
      default: false
    },
    //当前页数（必传）
    pageNum: {
      type: Number,
      default: 1
    },
    //总页数（必传）
    totalPage: {
      type: Number,
      default: 0
    },
    //总条数（必传）
    list: {
      type: Array,
      default: () => []
    },
    //是否显示回到顶部图标(非必传，需要返回到顶部功能是传true)
    showGotopIcon: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      triggered: false, //下拉刷新的结束标志(必传)
      refresherThreshold: 60,
      pullText: '下拉刷新', //下拉刷新的文字提示信息
      loadText: '', //上拉加载的文字提示信息
      showGoTop: true, //列表滚动到一定距离是否显示回到顶部按钮
      topNum: 0 //回到顶部的默认距离
    }
  },
  watch: {
    list: {
      handler: function(newValue) {
        if (newValue.length < 5) {
          this.loadText = ''
        }
      },
      deep: true
    }
  },
  methods: {
    //被下拉
    _onPulling(e) {
      this.triggered = true // 需要重置
      if (e.detail.dy < 60) {
        this.pullText = '下拉刷新'
      } else {
        this.pullText = '松开立即刷新'
      }
    },

    //下拉刷新执行
    _onRefresh() {
      this.pullText = '正在刷新'
      this.loadText = ''
      this.$emit('onRefresh')
    },

    //滚动到底部,上拉加载
    _onLoadmore() {
      if (this.list.length < 5) {
        this.loadText = ''
        return
      }
      if (this.pageNum < this.totalPage) {
        this.loadText = '加载中...'
        this.$emit('onLoadmore')
      } else {
        this.loadText = '没有更多数据了~'
      }
    },

    //滚动事件（用于页面中返回顶部使用）
    _onScroll(e) {
      if (e.detail.scrollTop > 200) {
        this.showGoTop = false
      } else {
        this.showGoTop = true
      }
    },

    //回到顶部
    goTop() {
      this.topNum = 0
    }
  }
}
</script>

<style lang="scss" scoped>
.upDownRefresh {
  width: 100%;
  height: 100%;
  .prv-container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .prv-scroll-view {
    height: 100%;
    flex: 1;
  }

  .prv-pulldown {
    width: 100%;
    height: 120px;
    text-align: center;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 3s;
  }
  .prv-pulldown .pullBg {
    width: 60px;
    height: 60px;
  }

  .prv-pulldown .pullText {
    color: #444;
  }

  .prv-loadmore {
    height: 120px;
    width: 100%;
    line-height: 120px;
    text-align: center;
    font-size: 26px;
  }

  .prv-loadmore text {
    color: #444;
  }
  .goTop {
    height: 80px;
    width: 80px;
    background: blue;
    position: fixed;
    z-index: 999;
    bottom: 50px;
    right: 30px;
  }
}
</style>

<!--
      //只需要上拉加载的
      <UpDownRefresh :pageNum="pageNo" :totalPage="total" :list="list" @onLoadmore="onLoadmore">
        <ul class="content">
          <li v-for="(item,index) in list" :key="index">{{item.address}}</li>
        </ul>
      </UpDownRefresh>

      //上拉加载和下拉刷新的
       <UpDownRefresh ref="upDownRefresh" :pageNum="pageNo" :totalPage="total" :list="list" :refresherEnable="true" @onLoadmore="onLoadmore" @onRefresh="onRefresh">
        <ul class="content">
          <li v-for="(item,index) in list" :key="index">{{item.address}}</li>
        </ul>
      </UpDownRefresh>

    <script>
    import { queryOrgListApi } from '@/api/xportsApi'
    import UpDownRefresh from './upDownRefresh.vue';
    export default {
      components: {
        UpDownRefresh
      },
      data() {
        return {
          pageNo:1,      //多少页
          pageSize: 10,  //每页多少条数据
          total: 0,      //总页数
          list: [],      //列表数据
        }
      },
      mounted () {
        this.getList();
      },
      methods: {
        getList(success) {
          let params = {
            tenantId: this.$store.state.appInfo.tenantId || '',
            pageNo: this.pageNo,
            tenantId: 1,
            pageSize: 6,
            centerId:'10000000'
          }
          queryOrgListApi.queryOrgList(params).then(res => {
            this.total = res.pageInfo.total;
            if(this.pageNo == 1){
              this.list = [];
            }
            this.list = [...this.list,...res.pageInfo.list];
            success && success();
          })
        },
        // 上拉加载
        onLoadmore(){
          this.pageNo++;
          this.getList();
        },
        //下拉刷新(先将页数置为第一页并将数据置空；获取数据成功后关闭下拉刷新的文字提示信息)
        onRefresh() {
          this.pageNo = 1;
          this.list = [];
          this.getList(()=>{
            console.log(1111,this.$refs.upDownRefresh.triggered );
            this.$refs.upDownRefresh.triggered = false;
            console.log(222,this.$refs.upDownRefresh.triggered );
          });
        },
      },
    }
    </script>
-->
